<template>
	<view :class="['flex-column']" v-show="iscomplie">
		<nav-bar>
			<template v-slot:left>
				<view class="flex" @click="openUserList">
					<text style="margin-right: 5rpx;">切换成员</text>
					<u-icon name="arrow-down" size="13"></u-icon>
				</view>
			</template>
		</nav-bar>
		<!-- <u-notice-bar :text="text1" :duration="4000" :speed="80" mode="closable" :url="wxurls"></u-notice-bar> -->
		<view class="container-top margin-vertical-10" style="background-color: ;">
			<view class="container-row padding-cross-10">
				<view class="gallery" @click="openReels">
					<image :src="globalIcon.headPortrait"></image>
				</view>
				<view class="user-info">
					<view class="container-text">
						<u-count-to :start-val="0" :end-val="userInfo.edge_owner_to_timeline_media
							" :duration="2000" :useEasing="false"></u-count-to>
						<text>帖子</text>
					</view>
					<view class="container-text">
						<u-count-to :start-val="0" :end-val="userInfo.edge_followed_by" :duration="2000" :useEasing="false">
						</u-count-to>
						<text>粉丝</text>
					</view>
					<view class="container-text">
						<u-count-to :start-val="0" :end-val="userInfo.edge_follow" :duration="2000" :useEasing="false">
						</u-count-to>
						<text>关注</text>
					</view>
				</view>
			</view>
			<view class="container padding-cross-10">
				<view style="display: flex;justify-content: space-between">
					<text>{{ userInfo.full_name }}́</text>
				</view>
				<text>{{ userInfo.biography }}</text>
				<!-- #ifndef MP-TOUTIAO -->
				<text style="font-size: 12px;" @click="modalShow=true">全新订阅,关注公众号roiselove就可以无限制接受帖子通知</text>
				<!-- <u-link :href="userInfo.external_url" text="youtu.be/gQlMMD8auMs" @click="click"></u-link> -->
				<!-- <view><text style="font-size: 0.8rem;">温馨提示:订阅是一次性的,多次点击可以累加</text></view> -->
				<!-- #endif -->
			</view>
		</view>
		<view class="flex" style="padding-left: 10rpx;column-gap: 10rpx;">
			<button size="mini" type="warn" class="hbutton" open-type="share">分享</button>
			<button size="mini" type="primary" class="hbutton" @click="subscrip">订阅<text style="margin-left: 0.5rem;"
					v-show="subcount > 0">{{ subcount }}</text></button>
			<button size="mini" type="default" class="hbutton skyblue" open-type="feedback">反馈</button>
			<button size="mini" type="success" class="hbutton" @click="goMessage">发消息</button>
		</view>
		<view class="container-middle">
			<!-- <view class="hightlight-item" @click="goReels(index)" v-for="(newitem,index) in curryReels" :key="index">
				<view class="image-circle">
					<u-avatar size="55" :src="transreel(newitem)"></u-avatar>
				</view>
				<text>{{transtime(newitem.expiring_at)}}</text>
			</view> -->
			<view class="hightlight-item" @click="goVideo(index)" v-for="(item, index) in hightLights" :key="index">
				<view class="image-circle">
					<u-avatar size="55" :src="transreel(item)"></u-avatar>
				</view>
				<text>{{ transtime(item.expiring_at) }}</text>
			</view>
		</view>
		<music v-if="userInfo.username == 'roses_are_rosie'" :items="musics" ref="music"></music>
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex" v-if="!isVipExpired">
			<view style="width: 600rpx">
				<ad unit-id="adunit-f929c2ef2e007bdc" ad-intervals="30"></ad>
			</view>
			<ad-custom unit-id="adunit-a542e42550500ee9"></ad-custom>
		</view>

		<!-- #endif -->
		<view :class="['container-botton']">
			<tab :datas="icons" :tabFunc="tabFunc"></tab>
			<view v-show="curryIndex === 0" class="container-flex">
				<view class="container-flex-item" @click="navigationDetail" v-for="(item, index) in itemList"
					:key="item.pk">
					<home-item :isUser="false" :config="item" @showMask="showMask" :itemId="index"></home-item>
				</view>
				<!-- <u-loadmore :status="status" :icon="true" :loading-text="loadingText" :nomore-text="nomoreText" /> -->
			</view>
			<view v-show="curryIndex === 1" class="container-flex">
				<view class="container-flex-item container-2h video-flex relative" v-for="(item, index) in videoList"
					:key="item.pk" @click="navigationVideoDetail(index)">
					<image class="image-h2" mode="aspectFill" :src="addUrl(item.shortcode)"></image>
					<view class="absolute bottom0 flex colum-gap-10 z999 padding-vertical-10"
						style="transform: translateY(-10rpx)">
						<u-icon color="#fff" name="play-right" size="20"></u-icon>
						<text class="white font08">{{
							trans(item.play_count)
						}}</text>
					</view>
				</view>
				<!-- 				<u-loadmore :status="status" :icon="true" :loading-text="loadingText" :nomore-text="nomoreText" /> -->
			</view>
			<view v-show="curryIndex === 2" class="container-flex">
				<text style="
						font-size: 1.2rem;
						font-weight: 700;
						margin-top: 50rpx;
						margin-left: 50%;
						transform: translateX(-50%);
					">后续开放此功能</text>
			</view>
		</view>

		<home-item-mask :isVideo="isVideo" :url="shortcode" :class="[
			'mask-alpha',
			showMasks === false
				? ''
				: 'mask-opaqueness',
		]"></home-item-mask>
		<u-modal width="400rpx" @close="close" :closeOnClickOverlay="true" :showConfirmButton="false" :show="showModel"
			:title="title">
			<view>
				<u-radio-group v-model="radiovalue1" placement="column" shape="circle">
					<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" :imgsrc="item.src" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="modalShow" :closeOnClickOverlay="true" @confirm="modalShow=false" @close="modalShow=false">
			<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="https://roseannepark.love/public/roise.jpg"></image>
				<text>扫描二维码即可关注公众号</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
import HomeItemMask from "./home-item-mask.vue";
import HomeItem from "./home-item.vue";
import HomeList from "./home-list.vue";
import Config from "@/common/config.js";
import {
	transPlayCount
} from "@/utils/utils.js";
import {
	subscrie,
	getSub
} from "@/api/app/api.js"
import {
	getMedias,
	getInfo,
	getEdge
} from "@/api/app/api.js"
import {
	nextTick
} from "vue";
import { getStore } from "../../api/app/api";

export default {
	components: {
		HomeItem,
		HomeItemMask,
		HomeList,
	},
	data() {
		return {
			status: "loading",
			loadingText: "努力加载中",
			nomoreText: "实在没有了",
			showModel: false,
			title: '更换成员',
			iscomplie: false,
			radiolist1: [],
			isplay: false,
			modalShow:false,
			paly: Config.base_Url + 'icons/paly.png',
			toast: {
				message: "你没有完整看完视频,切换成员失败",
				duration: 2000,
				position: "top",
				type: "error"
			},
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: 'roses_are_rosie',
			icons: [{
				type: "icon",
				icon: Config.cloud_url + "icons/grid.png",
				size: 18,
			},
			{
				type: "icon",
				icon: Config.cloud_url + "icons/video.png",
			},
			{
				type: "icon",
				icon: Config.cloud_url + "icons/tiktok.png",
			},
			],
			hightLights: [],
			curryTabIndex: 0,
			videoPage: 1,
			swipers: [],
			userInfo: {},
			itemList: [],
			videoList: [],
			users: [],
			wxurls: "/pages/weibo/weibo?url=https://mp.weixin.qq.com/s&__biz=Mzg5NTQ3NDM0NQ==&mid=2247483727&idx=1&sn=74d430d13375b17a98224213a04d6091&chksm=c00e8e89f779079f28f2b1bc595f3fd20ab88f7eb958a173b211f77e3e26180a54102cfc7b99#rd",
			text1: "1:已修复不能保存图片问题,保存图片的时候不要点击多次，点击一次即可保存当前帖子下的所有图片和视频,此举会带来流量的消耗导致给别人带来不便。2:订阅按钮是一次性的,多次点击可以累加,比如点击10下那么就会收到10次通知，以此类推。3:这个小程序本人只有空闲时间才会去修复出现的问题并不能保证第一时间去解决,因为本人也是打工人。4:为什么会有广告，因为当前小程序每个月需要固定的支出,比如服务器,CDN,查看图片和下载图片都是在消耗CDN流量,现在目前也是支出远远大于广告的收入。5:如果有什么好的想法可以私信或者反馈",
			tiktoks: [],
			curryPage: 1,
			isend: false,
			isLoading: false,
			isEnd: false,
			showMasks: false,
			bottom: 0,
			selectId: 0,
			curryIndex: 0,
			videoAd: null,
			prename: '',
			reels: {},
			audioCtx: null,
			musics: null,
			musicIndex: 0,
			imgtop: 0,
			imgleft: 0,
			imgwh: 0,
			subcount: 0,
			user: {}
		};
	},
	computed: {
		pageStyle() {
			return this.showMasks ?
				"overflow:hidden" :
				"overflow:visible";
		},
		isVideo() {
			let isvid = this.itemList[this.selectId]?.is_video;
			return isvid == '1' ? true : false
		},
		shortcode() {
			return this.itemList[this.selectId]?.shortcode ?? '';
		},
		curryReels() {
			return this.reels[this.userInfo.id]?.sort((a, b) => {
				if (a.expiring_at > b.expiring_at) {
					return -1;
				}
				if (a.expiring_at < b.expiring_at) {
					return 1
				}
				return 0;
			})
		},
		isVipExpired(){
			console.log('$store.getters.getVipExpired', this.$store.getters.getVipExpired)
			return this.$store.getters.getVipExpired
		}
	},
	onShareAppMessage() {
		return {
			title: 'ROSÉ的instagram',
			path: '/pages/home/home',
			imageUrl: this.globalIcon.headPortrait
		}
	},
	onShareTimeline() {
		return {
			title: 'ROSÉ的instagram',
			imageUrl: this.globalIcon.headPortrait
		}
	},
	methods: {
		goPulick() {
			console.log('点击')
			uni.navigateTo({
				url: "/pages/weibo/weibo"
				// url:"/pages/weibo/weibo"
			})
		},
		captaur() {
			// console.log('clickss sss')
			this.$refs.music.show = !this.$refs.music.show;
		},
		subscrip() {
			this.modalShow = true
			// this.suncomment(this.$store.getters.getUser.openid)
		},
		goMessage() {
			uni.navigateTo({
				url: `/pages/chat/chat`,
				success:(res)=>{
					res.eventChannel.emit(
						"userinfo", {
						data: this.userInfo,
					}
					);
				},
			})
		},
		suncomment(openid) {
			wx.requestSubscribeMessage({
				tmplIds: ['6GQpt-RTXXqeKkBHrhfdsmzl_pU1tjcUuxNFbn1ouGo'],
				success: (res) => {
					// console.log('suscript',res['6GQpt-RTXXqeKkBHrhfdsmzl_pU1tjcUuxNFbn1ouGo'])
					if (res['6GQpt-RTXXqeKkBHrhfdsmzl_pU1tjcUuxNFbn1ouGo'].includes('accept')) {
						subscrie({
							openid: openid
						}).then(res => {
							wx.showToast({
								title: '订阅成功',
								icon: 'success',
								duration: 1000
							})
							this.subcount = this.subcount + 1;

						}).catch(err => {
							wx.showToast({
								title: '订阅失败',
								icon: 'error',
								duration: 1000
							})
						})

					}
				},
				fail: (err) => {
					console.log('err', err)
				}
			})
		},
		pause() {
			if (this.isplay) {
				this.audioCtx.pause()
				this.paly = Config.base_Url + 'icons/paly.png'
			} else {
				this.audioCtx.play()
				this.paly = Config.base_Url + 'icons/pause.png'
			}
			this.isplay = !this.isplay;
		},
		gomusic(index) {
			let num = this.musicIndex + index;
			if (num < 0) {
				num = this.musics.length - 1;
			}
			if (num >= this.musics.length) {
				num = 0
			}
			this.musicIndex = num;
			this.$nextTick(() => {
				this.audioCtx.play();
				this.isplay = true;
				this.paly = Config.base_Url + 'icons/pause.png'
			})
		},
		goReels(index) {
			let data = this.curryReels[index];
			uni.navigateTo({
				url: "/subA/hightlight/hightlight",
				success(res) {
					res.eventChannel.emit(
						"videoChannel", {
						data: data,
					}
					);
				},
			});
		},
		transreel(item) {
			// console.log(Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg')
			return Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg'
		},
		openReels() {
			uni.navigateTo({
				url: '/subA/hightlight/reels'
			})
		},
		radioChange(name) {
			this.showModel = false;
			this.prename = this.radiovalue1;
			if (name != this.radiovalue1) {
				// #ifdef MP-WEIXIN
				wx.showModal({
					title: '温馨提示',
					content: '切换过程比较久而且伴随广告,是否要切换',
					success: (res) => {
						if (res.confirm) {
							this.radiovalue1 = name;
							if (this.videoAd) {
								this.videoAd.show().catch(() => {
									// 失败重试
									this.videoAd.load()
										.then(() => videoAd.show())
										.catch(err => {
											console.log('激励视频 广告显示失败')
										})
								})
							}
						} else {
							this.radiovalue1 = this.prename;
						}
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				this.radiovalue1 = name;
				this.reset();
				// #endif
			}

		},
		reset() {
			console.log('开始重置')
			this.curryPage = 1;
			this.curryTabIndex = 0;
			this.videoPage = 1;
			this.hightLights.splice(0);
			this.videoList.splice(0);
			this.itemList.splice(0);
			this.changeUserInfo();
			this.getImage(1);
			this.getVideo(1);
		},
		close() {
			this.showModel = false;
		},
		changeUserInfo() {
			let da = this.users.filter(item => {
				return item.username == this.radiovalue1
			});
			// console.log('da', da[0]);
			this.userInfo = Object.assign({},
				this.userInfo,
				da[0]
			);
			this.$store.commit(
				"setUserInfos",
				da[0]
			);
		},
		openUserList() {
			this.showModel = true;
		},
		trans(val) {
			return transPlayCount(val);
		},
		tabClick(index) {
			this.curryTabIndex = index;
		},
		addUrl(val) {
			return Config.static_url + 'ins_img/' + val + ".jpg";
		},
		sendMessage() {
			uni.navigateTo({
				url: "/pages/chat/chat?userId=rose",
			});
		},
		showMask(data) {
			this.showMasks = data.showMask;
			if (data.showMask) {
				this.selectId = data.id;
				// #ifdef MP-WEIXIN
				wx.setPageStyle({
					style: {
						overflow: "hidden",
					},
				});
				// #endif
			} else {
				// #ifdef MP-WEIXIN
				wx.setPageStyle({
					style: {
						overflow: "visible",
					},
				});
				// #endif
			}
		},
		comment2(data, isFlush) {
			if (isFlush) {
				this.itemList.splice(0);
				this.curryPage = 1;
				uni.stopPullDownRefresh();
			} else {
				this.curryPage = this.curryPage + 1;
			}
			this.itemList.push(
				...data
			);
			this.$store.commit(
				"setRoseEdge",
				data
			);
		},
		comment3(data, isFlush) {
			if (isFlush) {
				this.videoList.splice(0);
				this.videoPage = 0;
				uni.stopPullDownRefresh();
			} else {
				this.videoPage = this.videoPage + 1;
			}
			this.videoList.push(
				...data
			);
			uni.hideLoading()
		},
		async getImage(page = 1, isFlush = false) {
			uni.showLoading({
				title: "正在加载中"
			})
			getEdge({ page: page, user: this.radiovalue1 }).then(res => {
				this.comment2(res.data)
				uni.hideLoading();
			}).catch(err => {
				console.log('err', err)
				uni.hideLoading();
				uni.showToast({
					title: "加载失败",
					icon: "error",
					duration: 500
				})
			})
		},
		navigationDetail() {
			uni.navigateTo({
				url: "pages/detail/detail",
			});
		},
		navigationVideoDetail(_index) {
			let data = this.videoList[_index];
			uni.navigateTo({
				url: `/subA/detail/videoDetail?shortCode=${data.shortcode}`,
				success(res) {
					res.eventChannel.emit(
						"transformData", {
						data: data,
					}
					);
				},
			});
		},
		goVideo(index) {
			let data = this.hightLights[index];
			uni.navigateTo({
				url: "/subA/hightlight/hightlight",
				success(res) {
					res.eventChannel.emit(
						"videoChannel", {
						data: data,
					}
					);
				},
			});
		},
		async getVideo(page = 1, isFlush = false) {
			uni.showLoading({
				title: '正在加载中',
				mask: true,
			})
			getEdge({ page: page, isVideo: true }).then(res => {
				this.comment3(res.data, isFlush)
			}).catch(err => {
				uni.hideLoading()
				uni.showToast({
					title: "加载失败",
					icon: "error",
					duration: 500
				})
			})
		},
		tabFunc(index) {
			if (
				index === 1 &&
				this.videoList.length === 0
			) {
				this.getVideo(0);
			}
			this.curryIndex = index;
		},
		transreel(item) {
			// console.log(Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg')
			return Config.base_Url + 'ins_img/' + item.media_ids[0] + '.jpg'
		},
		transtime(time) {
			// console.log('time:',time)
			let date = new Date(Number(time + '000'));
			// console.log(date.getFullYear(),date.getMonth()+1,date.getDate())
			return date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + (date.getDate() - 1);
		},
		comment1(data) {
			this.hightLights.splice(0);
			data.forEach((item) => {
				if (item.type === "info") {
					if (item.username == this.radiovalue1) {
						this.userInfo = Object.assign({},
							this.userInfo,
							item
						);
						this.$store.commit(
							"setUserInfos",
							item
						);
					}
					this.radiolist1.push({
						name: item.username,
						disabled: false,
						src: Config.base_Url + 'ins_img/' + item.username + 'HeadPortrait.jpg'
					})
					this.users.push(item);
				} else if (item.type === "highlight") {
					this.hightLights.push({
						title: item.title,
						href: Config.cloud_url + 'ins_img/' +
							`${item.id}.jpg`,
						id: item.id,
						items: item.items,
						media_count: item.media_count,
						media_ids: item.media_ids,
						created_at: item.created_at,
					});
				} else if (item.type == 'reels') {
					if (this.reels[item.id] == undefined) {
						this.reels[item.id] = []
					}
					this.reels[item.id].push(item)
				} else if (item.type == 'music') {
					this.musics = item.items
					this.musics.reverse();
				}
			});
			this.iscomplie = true;
			uni.hideLoading()
			this.hightLights.sort((a, b) => {
				if (a.created_at > b.created_at) {
					return -1;
				}
				if (a.created_at < b.created_at) {
					return 1
				}
				return 0;
			})
		}
	},
	async onLoad(options) {
		this.audioCtx = wx.createAudioContext('myAudio')
		let infos = uni.getSystemInfoSync();
		let li = 375 / infos.screenWidth
		this.imgtop = li * 34
		this.imgleft = li * 36
		this.imgwh = li * 60
		console.log(options.user);
		if (options.user) {
			this.radiovalue1 = options.user
		}
		if (wx.createRewardedVideoAd) {
			this.videoAd = wx.createRewardedVideoAd({
				adUnitId: 'adunit-1a46f97dae2e96a2'
			});
			this.videoAd.onLoad(() => { })
			this.videoAd.onError((err) => {
				console.log('广告拉取失败')
			})
			this.videoAd.onClose((res) => {
				if (res && res.isEnded) {
					console.log('开始切换')
					this.reset();
				} else {
					this.radiovalue1 = this.prename;
					this.$refs.uToast.show(this.toast);
				}
			})
		}
		let arr = [];
		arr.push(
			Promise.resolve().then((res) => {
				getInfo().then(res => {
					console.log('res', res, this.radiovalue1)
					res.data.forEach(item => {
						if (item.type == 'info' && item.username == this.radiovalue1) {
							this.userInfo = Object.assign({},
								this.userInfo,
								item
							);
							this.$store.commit(
								"setUserInfos",
								item
							);
							getStore({
								page: 1,
								id: item.id
							}).then(res => {
								this.hightLights.push(...res.data)
							}).catch(err => {
								console.log('err', err)
							})
						}
						if (item.type == 'music') {
							this.musics = item.items
						} else {
							this.radiolist1.push({
								name: item.username,
								disabled: false,
								src: Config.base_Url + 'ins_img/' + item.username + 'HeadPortrait.jpg'
							})
							this.users.push(item);
						}
					})
					this.iscomplie = true;
				}).catch(err => {
					console.log('err', err)
				});
				getEdge({ user: this.radiovalue1, page: 1 }).then(res => {
					console.log('res', res)

				}).catch(err => {
					console.log('err', err)
				})
			}
			)
		);
		arr.push(Promise.resolve().then(res => {
			let user = this.$store.getters.getUser;
			this.user = Object.assign({}, this.user, user)
			// getSub({
			// 	openid: user.openid
			// }).then(res => {
			// 	console.log(res)
			// 	this.subcount = res.data[0]
			// 	if (this.subcount <= 0) {
			// 		uni.showToast({
			// 			title: "订阅数已用完",
			// 			icon: "error",
			// 			duration: 1000
			// 		})
			// 	}
			// }).catch(err => {
			// 	console.log(err)
			// })
		}))
		arr.push(
			Promise.resolve().then((res) =>
				this.getImage()
			)
		);
		Promise.all(arr);
	},
	onPullDownRefresh() {
		if (this.curryIndex === 0) {
			this.getImage(0, true);
		} else {
			this.getVideo(0, true);
		}
	},
	onShow() {
		wx.showTabBar()
	},
	onReachBottom() {
		console.log(this.curryIndex, this.curryPage, this.videoPage);

		this.curryIndex === 0 ?
			this.getImage(this.curryPage) :
			this.getVideo(this.videoPage);
	},
	onSaveExitState() {
		let datas = {
			imgList: this.itemList,
		}
		return {
			data: datas,
			expireTimeStamp: Date.now() + 2 * 60 * 60 * 1000
		}
	},
};
</script>

<style lang="scss">
/deep/ .uni-navbar__header-btns-left {
	width: auto !important;
}

.center /deep/ .u-button {
	height: 60rpx !important;
	width: 100%;
}

.status_bar {
	height: calc(var(--status-bar-height) * 2);
	width: 100%;
}

.skyblue {
	background-color: #34bfff !important;
}

.is-scoll {
	overflow: hidden;
	// position: fixed;
	min-height: 100vh;
}

.video-flex:nth-child(n + 4) {
	margin-top: -5rpx;
}

.hbutton {
	margin: 0 !important;
}

.gallery {
	--s: 156rpx;
	/* control the size */

	display: grid;
	width: var(--s);
	height: var(--s);
	overflow: hidden;
	padding: calc(var(--s) / 20);
	border-radius: 50%;
	position: relative;
	clip-path: circle(49.8%);
	/* to avoid a few glitch cause by overflow: hidden */
}

.gallery::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: inherit;
	border-radius: inherit;
	background: linear-gradient(#e66465, #9198e5);
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.gallery>image {
	grid-area: 1/1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transform-origin: 50% 120.7%;
}

// --status-bar-height
.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
}

.mask-alpha {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--status-bar-height);
	bottom: 0;
	opacity: 0;
	z-index: -998;
	transition: opacity 1s linear;
}

.mask-opaqueness {
	opacity: 1;
	will-change: opacity;
	background-color: rgba(177, 177, 177, 0.3);
	backdrop-filter: blur(10rpx);
	z-index: 999;
}

.loading {
	margin: 0 auto;
}

text {
	font-weight: 700;
}

.margin {
	margin: 0 10rpx;
}

.container {
	display: flex;
	flex-direction: column;
	margin-top: 15rpx;
}

.container-top {
	display: flex;
	flex-direction: column;
}

.image-circle {
	border: 3rpx solid skyblue;
	padding: 5rpx 5rpx;
	border-radius: 50%;
}

.image-circle:active {
	// border-style: dashed;
	// transition: border-style 1s;
	animation: dotted 2s ease-in-out infinite;
}

.container-row {
	display: flex;
	row-gap: 50rpx;
	column-gap: 30rpx;

	.user-info {
		display: flex;
		flex: 3;
		column-gap: 30rpx;
		justify-content: space-evenly;
	}
}

.container-img {
	flex: 1;
}

.container-button {
	display: flex;
	padding-top: 20rpx;
	padding-right: 20rpx;
	justify-content: space-between;

	button {
		margin: 0 0;
		padding: 0 0;
		border: 1rpx solid #cbcbcb;
		text-align: center;
		line-height: 80rpx;
	}

	.button-default {
		padding: 0 100rpx;
		height: 80rpx;
	}

	.button-icon {
		padding: 0 0;
		display: inline-block;
		width: max-content !important;

		.button-icon-bg {
			display: inline-block;
			height: 100%;
			aspect-ratio: 1/1;
			background-image: url("@/static/nav/add-friend.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: 50% 50%;
		}
	}
}

.container-flex-item:nth-child(n+4) {
	margin-top: 4rpx;
}

.container-grid {
	margin-top: 20rpx;
	display: grid;
	grid-template-columns: repeat(3, 33%);

	.container-grid-item {
		position: relative;

		image {
			width: 100%;
			aspect-ratio: 1/1;
			object-fit: cover;
		}

		.container-grid-item-image {
			position: absolute;
			width: 10%;
			aspect-ratio: 1/1;
			z-index: 998;
			box-shadow: 1rpx 1rpx 1rpx 1rpx #282828,
				7rpx 7rpx 1rpx 1rpx #6219ff;
			background-color: #fff;
			border-radius: 10%;
		}

		.container-grid-item-video {
			position: absolute;
			width: 1rpx;
			aspect-ratio: 1/1;
			border-left: 10% solid #d6d6d6;
			border-right: 5% solid transparent;
			border-top: 5% solid transparent;
			border-bottom: 5% solid transparent;
		}
	}
}

.container-middle {
	text-align: center;
	display: flex;
	justify-content: space-between;
	overflow-x: scroll;

	.hightlight-item {
		width: 28%;
		padding: 0 17rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;

		text {
			margin-top: 10rpx;
			font-size: 0.8em;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.h2 {
	height: auto;
	aspect-ratio: 1/2;

	image {
		width: 100%;
		height: 100%;
	}
}

@keyframes dotted {
	0% {
		border-style: dashed;
		transform: rotateZ(0deg);
	}

	100% {
		border-style: dashed;
		transform: rotateZ(360deg);
	}
}
</style>